<template>
  <div class="top-bar">
    <section class="logo">
      <img src="@/assets/images/police_badge.png" alt="app_logo">
      <h1>{{ APP_NAME }}</h1>
    </section>
    <section class="center">
      <el-segmented class="menu" v-model="currentRoute" :options="munuList">
        <!--<template #default="{ item }">
          <div class="menu-item">
            <!~~ <el-icon size="20">
              <component :is="scope.item.icon" />
            </el-icon> ~~>
            <h2>{{ item.meta.title }}</h2>
          </div>
        </template>-->
      </el-segmented>
    </section>
    <section class="right">
      <el-switch class="right-item" v-model="darkTheme" :active-action-icon="Moon" :inactive-action-icon="Sunny" />
      <el-badge class="badge-bell" :show-zero="false" :value="200" :max="99">
        <Bell width="26" height="26" />
      </el-badge>
      <div class="user">
        <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">{{ '熊倡' }}</el-avatar>
        <section class="user-info">
          <h6 class="user-info-main">{{ '熊倡' }}</h6>
          <span class="user-info-sub">{{ '科信科' }}</span>
        </section>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Bell, Sunny, Moon } from '@element-plus/icons-vue';
import { routes } from '@/router';
import { useRouter } from 'vue-router';
import { APP_NAME } from '@/config';
// import { useThemeStore } from '@/stores/theme'
// const { isDark } = useThemeStore();

const router = useRouter();

const darkTheme = ref(false);

const munuList = routes.filter(item => item.meta && item.meta.isMenu).map(item => ({ ...item, value: item.path, label: item.meta.title }))
const currentRoute = computed({
  get() {
    return router.currentRoute.value.path
  },
  set(newValue) {
    router.push(newValue)
  }
})

</script>

<style lang="scss" scoped>
.top-bar {
  height: var(--ycy-top-bar-height);
  padding: var(--ycy-gap-base) var(--ycy-gap-extra-large);
  background-color: var(--el-bg-color);
  display: flex;
  align-items: center;
  color: var(--el-text-color-primary);
  transition: var(--ycy-transition-base);

  .logo {
    cursor: default;
    display: flex;
    align-items: center;
    height: 100%;

    img {
      height: 48px;
      margin-right: var(--ycy-gap-small);
    }

    h1 {
      // color: var(--el-color-white);
      font-weight: bold;
      color: var(--el-text-color-primary);
      font-size: 24px;
    }
  }

  .center {
    flex: 1;
    margin: 0 var(--ycy-gap-large);
    display: flex;
    justify-content: center;
    align-items: center;

    .menu {
      &.el-segmented {
        padding: 0 var(--ycy-gap-base);
        background: transparent;

        :deep(.el-segmented__item) {
          user-select: none;
          font-size: var(--el-font-size-medium);
          padding: var(--ycy-gap-small) var(--ycy-gap-base);
          margin-right: var(--ycy-gap-base);

          &:last-child {
            margin-right: 0;
          }
        }

        :deep(.el-segmented__item-selected) {
          box-shadow: var(--ycy-box-shadow-primary);
        }
      }
    }
  }

  .right {
    height: 100%;
    // border: 2px solid red;
    display: flex;
    align-items: center;

    .right-item {
      margin-right: var(--ycy-gap-base);
    }

    .badge-bell {
      cursor: pointer;
      margin-right: calc(var(--ycy-gap-base) * 2);
      height: 100%;
      display: flex;
      align-items: center;
    }

    .user {
      height: 100%;
      display: flex;
      align-items: center;

      .el-avatar {
        margin-right: var(--ycy-gap-large);
      }

      .user-info {
        &-main {
          font-weight: bold;
          font-size: var(--el-font-size-medium);
          // color: var(--el-color-white);
        }

        &-sub {
          font-size: var(--el-font-size-base);
          // color: var(--el-color-white);
        }
      }
    }
  }
}
</style>